<template>
	<view>
		<view class="column" style="padding: 30rpx 30rpx;background-color: #FFFFFF;">
			<textarea v-model="text" :maxlength="maxlength" placeholder="请输入您的反馈意见~" />
			<text style="font-size: 30rpx;text-align: right;">{{text.length}}/{{maxlength}}</text>
		</view>

		<view>
			<input v-model="phone" class="input" placeholder="联系方式: 手机/微信/QQ" />
		</view>
		<view class="" style="padding: 10rpx;background-color: #FFFFFF;">
			<htz-image-upload :maxDuration="50"  :max="imgCountMax" mediaType="all" name="file" :chooseNum="9" v-model="imageData" @chooseSuccess="ceshiChooseSuccess">
			</htz-image-upload>
		</view>
		<view class="button" @click="submit" :class="btClass">
			提交
		</view>
	</view>
</template>

<script>
	import htzImageUpload from '@/components/htz-image-upload/htz-image-upload.vue'

	export default {
		components: { htzImageUpload },
		data() {
			return {
				maxlength: 80,
				text: "",
				phone: ``,
				imageData: [],
				imgCountMax:6
			};
		},
		computed: {
			btClass() {
				return this.text ? 'button-activation' : null
			}
		},
		onShow() {
		},
		methods: {
			ceshiChooseSuccess(tempFilePaths,e) { //选择图片返回
				console.log('ceshiChooseSuccess', tempFilePaths,e);
				// this.imageData=this.imageData.concat(tempFilePaths)
			
				//this.imageData.push(...tempFilePaths)
				/****************
				以下代码是自定义上传逻辑，仅供参考
				***************/
				
				if(tempFilePaths.length>0){
					tempFilePaths.forEach(item =>{
						this.uploadSuccess(item);
					})
				}else {
					this.uploadSuccess(tempFilePaths);
				}
				
				/*******************************/
			},
			uploadSuccess(tempFilePath){
				uni.showLoading({
					title:'开始上传'
				})
				// 4.根据自己的业务场景处理tempFilePath ;接口保存，或者上传至云空间
				console.log('tempFilePath_->',tempFilePath)
				uni.uploadFile({
					url:this.$util.BASE_URL + '/ossFile/upload',
					filePath: tempFilePath,
					name: 'file',
					header: {
						"Authorization": uni.getStorageSync(this.$util.USER_TOKEN_KEY)
					},
					success: res=> {
						const data = JSON.parse(res.data);
						uni.hideLoading();
						if(data.code == this.$ResponseStatus.OK){
							this.imageData.push(data.data)
						}else {
							this.$util.showInfoToast(data.message);
						}
					},
					fail: () => {
						networkError()
						uni.hideLoading();
					},
					complete: () => {
						uni.hideLoading()
					}
				});
			},
			submit() {
				const text = this.text
				if (!text) {
					return
				}
				const phone = this.phone
				const imgurl = this.imageData.join(",")
				let forms = {
						feedback: text,
						userId: -1,
						userPhone: phone,
						imgurl:imgurl
					}
					console.log(forms)
				this.$util.doPostJson(`/feedbcak/insertMic`, forms, {}, true).then(({
						data: {
							code,
							message
						}
					}) => {
						if (code === this.$ResponseStatus.OK) {
							this.$api.prePage().downCallback()
							setTimeout(()=>{
								uni.navigateBack({
									delta: 1
								})
							},500)
						} else {
							this.$util.showInfoToast(message)
						}
					})
					.catch(err => {
						console.error(err)
						this.$util.showInfoToast(`抱歉，反馈失败`)
					})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}

	.button {
		margin: 0rpx auto;
		width: 80%;
		background-color: #0094FB;
		color: #FFFFFF;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		border-radius: 50rpx;
		margin-top: 70rpx;
	}

	.button-activation {
		background-color: #0094FB;
		color: #FFF;
	}

	.input {
		border-bottom: 1rpx solid #A4A4A4;
		padding: 10rpx;
		margin: 10rpx;
	}
</style>
